import React from 'react'
import { Tree, Button, message, Breadcrumb, Modal, Row, Col } from 'antd'
import $ from 'jquery'
import moment from 'moment'
import Config from '../../common/config'
import server from '../server'

const TreeNode = Tree.TreeNode
const config = new Config()
const token = sessionStorage.getItem('token')
let UserInfo = sessionStorage.getItem('UserInfo')
UserInfo = UserInfo ? JSON.parse(UserInfo) : {}
const root = UserInfo.root
const auth = root ? {} : (UserInfo.auth ? (UserInfo.auth[server.serverName] || {}) : {})

class UserAllAuth extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      record: this.props.location.state,
      authTree: [],//权限树
      selected: [],//选择的权限
    };
  }
  componentWillMount() {
    return Promise.all([
      Promise.resolve($.ajax({
        url: `${config.Priviliege}/authority/tree`,
        type: "get",
        headers: { Authorization: 'Bearer ' + token },
      })),
      Promise.resolve($.ajax({
        url: `${config.Priviliege}/authority/getUserAllAuth`,
        type: "get",
        headers: { Authorization: 'Bearer ' + token },
        data: {
          id: this.state.record.id,
        }
      })),
    ]).then(data => {
      console.log(data)
      if (data[0].code == 200 && data[1].code == 200) {
        if (data[1].auth) {
          // const selected = data[1].auth.map(value => {
          //   return value.number
          // })
          this.state.selected = data[1].auth || []
        }
        this.setState({
          authTree: data[0].authority || [],
        })
      } else {
        message.error('服务器繁忙')
      }
    }).catch(err => {
      console.log(err)
      message.error('发生错误')
    })
  }

  //生成树选择组件
  nodeTree(arr) {
    return arr.map(value => {
      return <TreeNode
        key={value.number}
        title={value.name}
      >
        {
          value.children ? this.nodeTree(value.children) : ''
        }
      </TreeNode>
    })
  }

  cancelSave() {
    window.location.hash = '/user';
  }

  render() {
    const { authTree, selected, record } = this.state
    return (
      <div className="container">
        <div className="box" style={{ maxWidth: 1000 }}>
          <div className="goods-label-cont-nav clearfix" style={{ position: 'relative' }}>
            <Breadcrumb separator=">">
              <Breadcrumb.Item>权限管理</Breadcrumb.Item>
              <Breadcrumb.Item><span className='separator-a'>员工管理</span></Breadcrumb.Item>
              <Breadcrumb.Item><span className='separator-a'>员工详情</span></Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className='manager-modal'>
            <Row>
              <Col span={12}>
                <span >用户名：</span>
                <span>{record.userName}</span>
              </Col>
              <Col span={12}>
                <span>姓名：</span>
                <span>{
                  record.user_msgs[0] ? record.user_msgs[0].name : ''
                }</span>
              </Col>
            </Row>
            <p>权限：</p>
            {
              (authTree && authTree.length) ? <Tree
                checkable
                defaultExpandAll={true}
                checkStrictly
                checkedKeys={selected}
              >
                {
                  this.nodeTree(authTree)
                }
              </Tree> : ''
            }
          </div>
          <div style={{ textAlign: 'right', marginTop: 10 }}>
            <Button onClick={this.cancelSave.bind(this)}>关闭</Button>
          </div>
        </div>
      </div>
    );
  }
}
export default UserAllAuth;